<template>
  <div class="login">
    <div class="login_top">
      <div><img :src="loginTop" width="477" height="54"></div>
    </div>
    <div class="top_line"></div>
    <div class="loginmain">
      <div class="login_left">
        <div class="login_left_title">大力弘扬中医药传统文化——传承精华 守正创新</div>
        <div class="login_left_list">
          <div class="login_left_box">
            <div class="list_img" style="margin-left: 22px;"><img :src="sourceImg" width="24" height="24"></div>
            <div class="list_title">中医药文化资源</div>
          </div>
          <div class="login_left_box login_list_center">
            <div class="list_img" style="margin-left: 12px;"><img :src="Knowledge" width="24" height="24"></div>
            <div class="list_title">中医药健康知识角</div>
          </div>
          <div class="login_left_box">
            <div class="list_img" style="margin-left: 12px;"><img :src="Expo" width="24" height="24"></div>
            <div class="list_title">中医药数字博览会</div>
          </div>
        </div>
      </div>
      <div class="loginmainl">
        <div>
          <div class="login-title">内容创作与全媒体传播</div>
        </div>
         <div class="logintype">
          <div class="logiintypeitem" :class="{ 'active': active == item.id }" v-for="(item, index) in navlist"
            :key="index" @click="changetype(item)">
            {{ item.name }}
          </div>
        </div>
        <el-form class="login-form" ref="loginFormm" :model="loginFormm" :rules="loginRuless">
          <el-form-item prop="phoneNumber">
            <el-input v-model="loginFormm.phoneNumber" type="text" auto-complete="off" placeholder="请输入您的手机号">
              <svg-icon slot="prefix" icon-class="phone" color="#D5A771" class="el-input__icon input-icon"
                style="margin-left: 15px;margin-top: 15px;" />
            </el-input>
          </el-form-item>
          <el-form-item prop="code" v-if="captchaEnabled">
            <el-input v-model="loginFormm.code" auto-complete="off" placeholder="请输入图形验证码" style="width: 250px"
              @keyup.enter.native="handleLoginn">
              <template slot="prefix">
                <img :src="Verification" idth="20px" height="20px"
                  style="margin-top: 15px;margin-left: 15px;display: block;">
              </template>
              <!-- <svg-icon slot="prefix" icon-class="validCode" color="#D5A771" class="el-input__icon input-icon" /> -->
            </el-input>
            <div class="login-code">
              <img style=" width: 140px;" :src="codeUrl" @click="getCode()" class="login-code-img" />
            </div>
          </el-form-item>
          <el-form-item prop="smsCode">
            <el-input v-model="loginFormm.smsCode" auto-complete="off" placeholder="请输入短信验证码"
              @keyup.enter.native="handleLoginn">

              <template slot="prefix">
                <img :src="Verification" width="20px" height="20px"
                  style="margin-top: 15px;display: block;margin-left: 15px;">
              </template>
              <template slot="suffix">
                <div  @click="getSmsCode" style="margin-top: 8px;margin-right: 15px;cursor: pointer;color: #D5A771;" >{{ computeTime > 0 ?
                  ` ${computeTime}s 已发送` :
                  '获取验证码' }}</div>
              </template>

              <!-- <svg-icon slot="prefix" icon-class="validCode" color="#D5A771" class="el-input__icon input-icon" /> -->
            </el-input>
            <!-- <div class="login-code">
              <el-button @click.native.prevent="getSmsCode" type="primary"
                style="background-color: #D5A771;border-color: #D5A771;">{{ computeTime > 0 ?
                  ` ${computeTime}s 已发送` :
                  '获取验证码' }}</el-button>
            </div> -->
          </el-form-item>

          <el-form-item class="login_box">
            <el-button :loading="loadingg" size="medium" type="primary"
              style="width:100%;background-color: #D5A771;border-color: #D5A771;height: 50px;"
              @click.native.prevent="handleLoginn">
              <span v-if="!loadingg">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
           
            <div class="wangji">
              <div class="zhuce" style="margin-top: 10px;">登录即代表您已同意 <span style="cursor: pointer;color:#D5A771"
                  @click="$router.push({ path: '/yinsi' })">《隐私政策》</span>和<span style="cursor: pointer;color:#D5A771"
                  @click="$router.push({ path: '/fuwuxieyi' })">《服务条款》</span></div>
            </div>
            <!-- <div style="font-size: 12px;
                  font-family: Source Han Sans, Source Han Sans;
                  font-weight: 400;
                  color: #999999;
              line-height: 30px;width: 100%;text-align: center;margin-top: 277px;cursor: pointer;" @click="goBeiAn">
                豫ICP15010994号-2
              </div> -->
              
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="el-login-footer">
    </div>
  </div>
</template>

<script>
import { getCodeImg, getcode, loginnn, registernew } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
  name: "Login",
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.loginFormm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      loginTop: require('@/assets/images/login_top.png'),
      phoneLogo: require('@/assets/images/phone_logo.png'),
      Verification: require('@/assets/images/Verification_code.png'),
      userTitle: require('@/assets/images/user_title.png'),
      // wechatImg: require('@/assets/images/wechat@2x.png'),
      sourceImg: require('@/assets/images/source.png'),
      Knowledge: require('@/assets/images/Knowledge Corner@2x.png'),
      Expo: require('@/assets/images/Expo@2x.png'),
      navlist: [
        { name: "账号绑定", id: "1" },
      ],
      computeTime: 0,
      active: "1",
      timer: null,
      codeUrl: "",
      loginFormm: {
        phoneNumber: "",
        sendType: "smsRegister",
        code: "",
        uuid: "",
        smsCode: "",
        registeredType: "bangding",
        openId: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loginRuless: {
        phoneNumber: [
          { required: true, trigger: "blur", message: "请输入您的手机号" }
        ],
        smsCode: [{ required: true, trigger: "blur", message: "验证码不能为空" }],
        code: [{ required: true, trigger: "change", message: "请输入图形验证码" }]
      },
      loading: false,
      loadingg: false,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: true,
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.loginFormm.openId = this.$route.query.openId
    this.getCode();
    // this.getCookie();
  },
  methods: {
    changetype(item) {
      this.active = item.id
    },
    getSmsCode() {
      if (!this.computeTime) {
        if (this.loginFormm.phoneNumber) {
          getcode(this.loginFormm).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '验证码已发送',
                type: 'success'
              });
              // this.loginForm.uuid = res.uuid;
              this.computeTime = 60;
              this.timer = setInterval(() => {
                this.computeTime--;
                if (this.computeTime <= 0) {
                  clearInterval(this.timer)
                }
              }, 1000);
            }

          })
        } else {
          this.$message({
            message: '请输入手机号',
            type: 'danger'
          });
        }
      }
    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginFormm.uuid = res.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store.dispatch("NewLogin", this.loginForm).then(() => {
            console.log("zoul ")
            this.$router.push({ path: this.redirect || "/" }).catch(() => { });
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
        }
      });
    },
    handleLoginn() {
      this.$refs.loginFormm.validate(valid => {
        if (valid) {
          this.$store.dispatch("blogin", this.loginFormm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(() => {
            });
          }).catch((res) => {
            this.computeTime = 0
            this.loginFormm.code = ""
            this.loginFormm.smsCode = ""
            this.getCode()
            clearInterval(this.timer)
          });

        }
      });
    }

  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  padding-left: 40px !important;
  // line-height: 50px !important;
  height: 50px !important;
}

::v-deep .el-form-item__content {
  height: 50px !important;
}

::v-deep .el-input__prefix {
  left: 0;
}


// ::v-deep .el-form-item {
//   margin-bottom: 30px !important;
// }
::v-deep .svg-icon {
  width: 20px !important;
  height: 20px !important;
}
</style>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  //height: 950px;
  background-image: url("../../../assets/images/background.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;

  .login_top {
    margin: 0 auto;
    padding-top: 20px;
    padding-left: 40px;
    
  }

  .top_line {
    width: 100%;
    height: 1px;
    background-color: #fff;
    margin-top: 5px;
  }

  .loginmain {
    opacity: 1;
    border-radius: 15px;
    display: flex;
    justify-content: center;
     padding-top: 5.0rem;
    .login_left {
    //  margin-top: 146px;
      margin-right: 120px;

      .login_left_title {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        font-size: 32px;
        color: #000000;
        line-height: 48px;
      }

      .login_left_list {
        margin-top: 30px;
        display: flex;
        flex-direction: row;

        .login_left_box {
          display: flex;
          width: 219px;
          height: 56px;
          padding: 15px 0;
          border: 1px solid #D5A771;
          border-radius: 4px;

          .list_img {
            display: inline;
          }

          .list_title {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-size: 20px;
            color: #463F37;
            margin-left: 10px;
            text-align: left;
          }
        }

        .login_list_center {
          margin: 0 20px;
        }
      }
    }

    .loginmainl {
      width: 480px;
      height: 516px;
      background: #FFFFFF;
      box-shadow: 0px 0px 10px 0px rgba(213, 167, 113, 0.2);
      border-radius: 10px;
    //  margin-top: 146px;
       .logintype {
       // width: 200px;
        display: flex;
        justify-content: center;
        //  margin-left: 40px;
        //  margin-top: 25px;
        // margin-bottom: 36px;
        margin: auto auto 25px auto;

        .logiintypeitem {
          cursor: pointer;
          width: 105px;
          font-size: 20px;
          line-height: 40px;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 400;
          color: #999999;
        }

         .active {
          color: #000;
          border-bottom: 1px solid #000;
          font-weight: bold;
        }
      }
      .login-title {
        margin-top: 40px;
      //  margin-bottom: 50px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        font-size: 28px;
        color: #000000;
        text-align: center;
        
      }

      .login-form {
        //width: 90%;
        padding: 0 40px;
        margin: 0 auto;
        //margin-top: 30px;
        border-radius: 6px;
        background: #ffffff;

        .login-code {
          width: 140px;
          height: 38px;
          float: right;

          .el-button {
            width: 100%;
          }

          img {
            cursor: pointer;
            vertical-align: middle;
          }
        }

        .el-input {
          height: 38px;

          input {
            height: 38px;
          }
        }

      }

      .login-form .el-input input {
        background-color: #F4F4F4;
        border: 1px solid #D8D8D8;
      }

      .login-code-img {
        height: 50px;
      }

      .login_box {
        margin-top: 48px;

        .wechat_login {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          margin-top: 50px;
          cursor: pointer;

          .wechat_tips {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-size: 12px;
            line-height: 12px;
            margin-top: 6px;
            color: #909090;
            text-align: center;
            margin-top: 10px;
          }
        }

        .wangji {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 14px;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 400;
          color: #999999;
          // line-height: 14px;
          text-align: center;
        }
      }

    }
  }
}
::v-deep .el-input__inner {
  padding-left: 2.5rem !important;
  height: 3.125rem !important;
  font-size: 1rem;
  background-color: #F4F4F4;
  border: 1px solid #D8D8D8;
}
</style>
